<template>
  <el-dialog
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible="visible"
    :title="
      ruleSubForm.id
        ? $t('common.common20') + $t('protocolManagement.protocolManagement2')
        : $t('common.common18') + $t('protocolManagement.protocolManagement2')
    "
    width="820px"
  >
    <el-form
      :model="ruleSubForm"
      ref="ruleSubForm"
      :label-width="langSufx=='en'?'180px':'130px'"
      :rules="rules"
    >
      <!-- 协议名称(中英) -->
      <el-form-item
        :label="
          $t('protocolManagement.protocolManagement1') +
          '(' +
          $t('openCheck.openCheck12') +
          ')'
        "
        prop="name_zh"
      >
        <el-input v-model="ruleSubForm.name_zh"></el-input>
      </el-form-item>
      <el-form-item
        :label="
          $t('protocolManagement.protocolManagement1') +
          '(' +
          $t('openCheck.openCheck13') +
          ')'
        "
        prop="name_en"
      >
        <el-input v-model="ruleSubForm.name_en"></el-input>
      </el-form-item>
      <el-form-item
        :label="
          $t('protocolManagement.protocolManagement1') +
          '(' +
          $t('openCheck.openCheck26') +
          ')'
        "
        prop="name_tc"
      >
        <el-input v-model="ruleSubForm.name_tc"></el-input>
      </el-form-item>
      <!-- 位置 -->
      <el-form-item :label="$t('openPreparation.openPreparation1')" prop="type">
        <el-select
          v-model="ruleSubForm.type"
          :placeholder="$t('openPreparation.openPreparation1')"
          :disabled="ruleSubForm.id ? true : false"
        >
          <el-option
            v-for="item in xieyinMode"
            :disabled="
              (selectObj.register == 1 && item.id == '2') ||
              (selectObj.payment == 1 && item.id == '3')
            "
            :key="item.id"
            :label="item.value"
            :value="Number(item.id)"
          />
        </el-select>
      </el-form-item>
      <!-- 协议形式 -->
      <el-form-item
        :label="$t('protocolManagement.protocolManagement3')"
        prop="is_pdf"
      >
        <el-select
          v-model="ruleSubForm.is_pdf"
          :placeholder="$t('protocolManagement.protocolManagement3')"
        >
          <el-option
            v-for="item in xieyinUpMode"
            :key="item.id"
            :label="item.value"
            :value="Number(item.id)"
          />
        </el-select>
      </el-form-item>
      <!-- 协议(中英) -->
      <div v-if="ruleSubForm.is_pdf == 1">
        <el-form-item
          :label="
            $t('protocolManagement.protocolManagement2') +
            '(' +
            $t('openCheck.openCheck12') +
            ')'
          "
          prop="content_zh"
        >
          <wangeditor v-model="ruleSubForm.content_zh" style="width: 100%" />
        </el-form-item>
        <el-form-item
          :label="
            $t('protocolManagement.protocolManagement2') +
            '(' +
            $t('openCheck.openCheck13') +
            ')'
          "
          prop="content_en"
        >
          <wangeditor v-model="ruleSubForm.content_en" style="width: 100%" />
        </el-form-item>
        <el-form-item
          :label="
            $t('protocolManagement.protocolManagement2') +
            '(' +
            $t('openCheck.openCheck26') +
            ')'
          "
          prop="content_tc"
        >
          <wangeditor v-model="ruleSubForm.content_tc" style="width: 100%" />
        </el-form-item>
      </div>
      <div v-if="ruleSubForm.is_pdf == 2">
        <form-file
          :value.sync="ruleSubForm.pdf_url_zh"
          :hrefTitle.sync="ruleSubForm.pdf_name_zh"
          :propValue="'pdf_url_zh'"
          :labelRuleValue="{
            title: 'PDF' + '(' + $t('openCheck.openCheck12') + ')',
            type: '1',
            rule: 'required',
          }"
          :uploadType="'.PDF'"
          :FormName="'ruleSubForm'"
          @getFileVail="getFileVail"
        ></form-file>
        <form-file
          :value.sync="ruleSubForm.pdf_url_en"
          :hrefTitle.sync="ruleSubForm.pdf_name_en"
          :propValue="'pdf_url_en'"
          :labelRuleValue="{
            title: 'PDF' + '(' + $t('openCheck.openCheck13') + ')',
            type: '1',
            rule: 'required',
          }"
          :uploadType="'.PDF'"
          :FormName="'ruleSubForm'"
          @getFileVail="getFileVail"
        ></form-file>
        <form-file
          :value.sync="ruleSubForm.pdf_url_tc"
          :hrefTitle.sync="ruleSubForm.pdf_name_tc"
          :propValue="'pdf_url_tc'"
          :labelRuleValue="{
            title: 'PDF' + '(' + $t('openCheck.openCheck26') + ')',
            type: '1',
            rule: 'required',
          }"
          :uploadType="'.PDF'"
          :FormName="'ruleSubForm'"
          @getFileVail="getFileVail"
        ></form-file>
      </div>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="
        (checkPermission(['agreements@update']) && ruleSubForm.id) ||
        (checkPermission(['agreements@save']) && !ruleSubForm.id)
      "
    >
      <el-button type="info" plain @click="cancel">
        {{ $t("common.common1") }}
      </el-button>
      <el-button
        :loading="submitLoading"
        type="primary"
        plain
        @click="submit('ruleSubForm')"
      >
        {{ $t("common.common2") }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  CusInfo,
  addItem,
  updateItem,
  check_agreement_type,
} from "@/api/systems/protocolManagement";
import { xieyinMode, xieyinUpMode } from "@/assets/js/common";
import FormFile from "@/components/typeTag/FormFile";
import wangeditor from "@/components/wangeditor";
export default {
  components: {
    FormFile,
    wangeditor,
  },
  data() {
    return {
      xieyinMode,
      xieyinUpMode,
      visible: false,
      submitLoading: false,
      ruleSubForm: {},
      selectObj: {},
      rules: {
        name_zh: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement1") +
              "(" +
              this.$t("openCheck.openCheck12") +
              ")",
            trigger: "blur",
          },
        ],
        name_en: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement1") +
              "(" +
              this.$t("openCheck.openCheck13") +
              ")",
            trigger: "blur",
          },
        ],
        name_tc: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement1") +
              "(" +
              this.$t("openCheck.openCheck26") +
              ")",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message:
              this.$t("common.common27") +
              this.$t("openPreparation.openPreparation1"),
            trigger: "change",
          },
        ],
        is_pdf: [
          {
            required: true,
            message:
              this.$t("common.common27") +
              this.$t("protocolManagement.protocolManagement3"),
            trigger: "change",
          },
        ],
        content_zh: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement2") +
              "(" +
              this.$t("openCheck.openCheck12") +
              ")",
            trigger: "blur",
          },
          {
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement2") +
              "(" +
              this.$t("openCheck.openCheck12") +
              ")",
            trigger: "blur",
            pattern: /[^/<p><br></p>/]/,
          },
        ],
        content_en: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement2") +
              "(" +
              this.$t("openCheck.openCheck13") +
              ")",
            trigger: "blur",
          },
          {
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement2") +
              "(" +
              this.$t("openCheck.openCheck13") +
              ")",
            trigger: "blur",
            pattern: /[^/<p><br></p>/]/,
          },
        ],
        content_tc: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement2") +
              "(" +
              this.$t("openCheck.openCheck26") +
              ")",
            trigger: "blur",
          },
          {
            message:
              this.$t("common.common26") +
              this.$t("protocolManagement.protocolManagement2") +
              "(" +
              this.$t("openCheck.openCheck26") +
              ")",
            trigger: "blur",
            pattern: /[^/<p><br></p>/]/,
          },
        ],
      },
    };
  },
  computed:{
      langSufx() {
          return this.$store.state.settings.langTail;
      },
  },
  methods: {
    init(rowID) {
      if (rowID) {
        //编辑
        CusInfo(rowID)
          .then((res) => {
            if (res.code == 10000) {
              this.ruleSubForm = res.data;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((error) => {
            this.$message.error(error.Error);
          });
      } else {
        check_agreement_type()
          .then((res) => {
            if (res.code == 10000) {
              this.selectObj = res.data;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((error) => {
            this.$message.error(error.Error);
          });
        //新增
        this.ruleSubForm = {
          type: 1,
        };
      }
      this.visible = true;
    },
    cancel() {
      this.ruleSubForm = {};
      this.$refs.ruleSubForm.resetFields();
      this.visible = false;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // `是否确认提交?`, "提示",
          this.$confirm(this.$t("common.common29"), this.$t("common.common5"), {
            confirmButtonText: this.$t("common.common2"),
            cancelButtonText: this.$t("common.common1"),
            type: "warning",
          })
            .then(() => {
              this.submitLoading = true;
              if (this.ruleSubForm.id) {
                //编辑
                updateItem(this.ruleSubForm.id, this.ruleSubForm)
                  .then((res) => {
                    this.submitLoading = false;
                    if (res.code == 10000) {
                      this.cancel();
                      this.$parent.getList();
                    }
                  })
                  .catch((error) => {
                    this.$message.error(error.Error);
                  });
              } else {
                //新增
                addItem(this.ruleSubForm)
                  .then((res) => {
                    this.submitLoading = false;
                    if (res.code == 10000) {
                      this.cancel();
                      this.$parent.getList();
                    }
                  })
                  .catch((error) => {
                    this.$message.error(error.Error);
                  });
              }
            })
            .catch(() => {});
        }
      });
    },
    getFileVail(formField, FormName) {
      this.$refs[FormName].validateField([formField], (valid) => {});
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>